<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:sa="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>登录私人社区</title>
    <link rel="stylesheet" th:href="@{/static/layui/js/css/layui.css}">
    <script th:src="@{/static/layui/js/layui.js}" charset="UTF-8" type="text/javascript"></script>
    <script th:src="@{/static/vue/vue.js}" charset="UTF-8" type="text/javascript"></script>
    <script th:src="@{/static/vue/axios.min.js}" charset="UTF-8" type="text/javascript"></script>
    <script th:src="@{/static/jquery/jquery.js}" charset="UTF-8" type="text/javascript"></script>
    <script th:src="@{/static/js-base64/base64.js}"></script>
    <style>
        .layui-bold{
            font-weight: bold;
        }
    </style>
</head>
<body style="background-color: whitesmoke">
<div class="layui-layout layui-layout-admin" >
    <div class="layui-header layui-bg-green">
        <div class="layui-logo layui-hide-xs  layui-bg-green layui-bold">
            私人社区
        </div>

    </div>
    <div class="layui-layout-body" >
        <div class="layui-container">

            <div class="layui-row layui-col-space6" style="margin-top: 120px">
                <div class="layui-col-md3">
                    <img th:src="@{/static/img/test/logo2.jpg}">
                </div>

                <div class="layui-col-md3 layui-col-md-offset6">
                    <div class="layui-panel" style="width: 400px;border-radius: 25px;height: 500px;box-shadow: 0 0 5px">
                        <div class="layui-row" style="margin-top: 50px;margin-left: 30px">
                            <div class="layui-font-20 layui-bold" style="margin-left: 24%">欢迎登录私人社区</div>
                        </div>
                        <div class="layui-row" style="margin-top: 50px;margin-left: 30px">
                            <!--登录信息输入表单-->
                            <form class="layui-form" th:action="@{/sso/doLogin}" id="login_form">
                                <div class="layui-form-item">
                                    <div class="layui-input-inline">
                                        <input type="text"
                                               required
                                               lay-verify="required"
                                               placeholder="请输入用户账号"
                                               autocomplete="off"
                                               class="layui-input"
                                               id="username"
                                               v-model="account"
                                               style="width: 340px">
                                    </div>
                                </div>

                                <div class="layui-form-item">
                                    <div class="layui-input-inline">
                                        <input type="password"
                                               required
                                               lay-verify="required"
                                               placeholder="请输入密码"
                                               autocomplete="off"
                                               class="layui-input"
                                               id="password"
                                               v-model="password"
                                               style="width: 340px">
                                    </div>
                                </div>


                                <div class="layui-form-item">
                                    <div class="layui-input-inline">
                                        <div class="layui-row ">
                                            <div class="layui-col-md6"> <input type="text"
                                                                               required
                                                                               lay-verify="required"
                                                                               placeholder="验证码"
                                                                               autocomplete="off"
                                                                               class="layui-input"
                                                                               id="code"
                                                                               v-model="code"
                                                                               style="width: 220px"></div>
                                            <div class="layui-col-md6" >
                                                <img src="/static/img/test/IMG_1008.jpg" style="height: 37px;width: 100px;margin-left: 145px" id="kaptcharImg">
                                            </div>
                                        </div>



                                    </div>
                                </div>


                                <div class="layui-form-item">
                                    <div class="layui-input-inline">

                                        <input type="checkbox"
                                               name="choice"
                                               lay-filter="choice"
                                               value="1"
                                               title="记住我"
                                               lay-skin="primary">


                                    </div>
                                </div>

                                <div class="layui-form-item" style="margin-left: -110px">
                                    <div class="layui-input-block">
                                        <button class="layui-btn" lay-submit lay-filter="formDemo" @click="login_submit" style="width: 340px">立即提交</button>

                                    </div>
                                </div>
                                <div class="layui-form-item" style="margin-left: -110px">
                                    <div class="layui-input-block">
                                        <button type="reset" class="layui-btn layui-btn-primary" @click="login_reset" style="width: 340px">重置</button>

                                    </div>
                                </div>


                            </form>
                        </div>


                    </div>

                </div>

            </div>


        </div>

    </div>


</div>


<!--获取验证图片的api-->
<form id="kaptcharApi" th:action="@{/kaptchar}"></form>

<script type="text/javascript" th:src="@{/static/login.js}"></script>
</body>
</html>